<template>
    <div class="white-module module">
      <div class="title"><span></span>赛事信息</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>赛事名称</span>山东省潍坊地区选拔赛</div>
        </div>
        <div class="item">
          <div class="o">  <span>选手姓名</span>张三</div>
        </div>
        <div class="item">
          <div class="o"> <span>参与赛项</span>旋翼类个人空中射击赛</div>
        </div>
  
        <div class="item">
          <div class="o">  <span>参与组别</span>小学组</div>
        </div>
        <div class="item">
          <div class="o">  <span>获奖证书</span><el-button type="text">下载证书</el-button></div>
        </div>
      </div>

        <div class="images">
          <div class="item">
            <div class="image">
              <img
                src="https://l.b2b168.com/2021/06/10/10/202106101058572863584.jpg"
              />
              
            </div>
          </div>
        </div>
      </div>
  </template>
  
<script lang="ts" setup>
import { ref } from "vue";
</script>
  
<style lang="scss" scoped>
.module {
  padding: 20px 0px 50px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: $font-weight-bold;
    padding: 0px 24px;

    span {
      width: 4px;
      height: 12px;
      background: #00a0e9;
      margin-right: 7px;
    }
  }

  .c {
    display: flex;
    align-items: flex-start;

    .info {
      width: 490px;
    }
  }

  .info {
    margin-bottom: 10px;

    margin-top: 4px;
    .item {
      display: flex;
      align-items: center;
      margin-top: 8px;
      color: #4f5a70;

      .o {
        width: 524px;
      }

      span {
        width: 60px;
        margin-left: 35px;
        text-align: right;

        margin-right: 20px;
      }

      .el-button {
        margin-top: -4px;
      }
    }
  }

  .images {
    display: flex;

    .item {
      display: flex;
      margin-left: 30px;
      font-weight: $font-weight-bold;

      .image {
        background: rgba(222, 224, 227, 0.23);
        border-radius: 4px;
        padding: 24px 41px;
        margin-left: 8px;
        position: relative;

        >img {
          width: 986px;
          display: block;
        }


      }
    }
  }
}</style>
  